{{extend name="user/index" /}}

{{block name="title"}}
<body data-type="widgets">
<script src="/static/admin/js/theme.js"></script>
<div class="am-g tpl-g">
    {{/block}}

    {{block name="content"}}

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">订单列表</div>


                        </div>
                        <div class="widget-body  am-fr">

                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">

                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="am-form-group tpl-table-list-select">
                                    <select data-am-selected="{btnSize: 'sm'}">
                                        <option value="option1">所有类别</option>
                                        <option value="option2">IT业界</option>
                                        <option value="option3">数码产品</option>
                                        <option value="option3">笔记本电脑</option>
                                        <option value="option3">平板电脑</option>
                                        <option value="option3">只能手机</option>
                                        <option value="option3">超极本</option>
                                    </select>
                                </div>
                            </div>
                            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                                <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                    <input type="text" class="am-form-field ">
                                    <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search"
                    type="button"></button>
          </span>
                                </div>
                            </div>

                            <div class="am-u-sm-12">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                                       id="example">
                                    <thead>
                                    <tr>
                                        <th>用户ID</th>
                                        <th>用户名字</th>
                                        <th>用户手机号</th>
                                        <th>订单总金额</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{volist name="details" key="k" id="v"}}
                                    <tr class="even gradeC">
                                        <td>{{$v['userid']}}</td>
                                        <td>{{$v['username']}}</td>
                                        <td>{{$v['tel']}}</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                ￥ {{$v['total']}}
                                            </div>
                                        </td>
                                    </tr>

                                    {{/volist}}
                                    <!-- more data -->
                                    </tbody>
                                </table>

                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                                       id="example-r">
                                    <thead>
                                    <tr>
                                        <th>菜品ID</th>
                                        <th style="margin: 5px 22px;">菜品图片</th>
                                        <th>菜名</th>
                                        <th>菜品数量</th>
                                        <th>菜品金额</th>
                                        <th>菜品金额小计</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {{volist name="details" key="k" id="v"}}
                                    <tr class="evengradeD">
                                        <td>{{$v['gid']}}</td>
                                        <td style="margin: 5px 22px;">
                                            <img src="{{$v['pictrue']}}" width="176px" height="127px" />
                                        </td>
                                        <td>{{$v['name']}}</td>
                                        <td>{{$v['count']}} 份</td>
                                        <td>￥ {{$v['price']}}</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                ￥ {{$v['oneprice']}}
                                            </div>
                                        </td>
                                    </tr>

                                    {{/volist}}
                                    <!-- more data -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="am-u-lg-12 am-cf">

                                <div class="am-fr">
                                    <ul class="am-pagination tpl-pagination">
                                        <li class="am-disabled"><a href="#">«</a></li>
                                        <li class="am-active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 50px;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            用户 [ <u></u> ] 的详细信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-9">
                                <h3></h3>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>


        $(function () {
            // 设置弹框参数
            toastr.options = {
                closeButton: true,// 是否显示关闭按钮
                progressBar: true,// 实现显示计时条
                timeOut: "3000",  // 自动关闭时间
                positionClass: "toast-bottom-left" // 提示位置
                // toast-top-full-width 顶端，宽度铺满整个屏幕
                // toast-top-right  顶端右边
            };

            // 触发删除用户
            $('.del-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                console.log('删除操作,ID:', ac_id);
                if (confirm('你确定要[删除]吗?!')) {
                    var obj = $(this).parents('tr');
                    console.log(obj);
                    delAjax(ac_id, obj); // 执行AJAX删除
                }
            });
            // 触发查询单个用户信息
            $('.show-btn').click(function () {
                var ac_id = $(this).attr('data-id');
                console.log('查询操作,ID:', ac_id);
                showAjax(ac_id); // 指定查看信息操作
            });
        });
        function showAjax(id) {
            // console.log(obj);
            $.ajax({
                type: 'get',
                url: '/node/' + id,
                dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data.status) {
                        $('.modal-title u').html(data.title);
                        var msg = data.datas.name + '/'+data.datas.tel;
                        $('.modal-body h3').html(msg);
                    } else {
                        $('.modal-title u').html(data.title);
                        $('.modal-body h3').html(data.datas);
                    }
                },
                error: function () {
                    alert('AJAX操作失败');
                }
            });
        }

        // 执行AJAX删除
        function delAjax(id, obj) {
            console.log(obj);
            $.ajax({
                type: 'delete',
                url: 'node/' + id,
                dataType: 'json',
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                        // 将该条目删除掉
                        obj.remove();
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    alert('AJAX操作失败');
                }
            });
        }


    </script>


    {{/block}}